<template>
    <div class="wrapper">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon label-position="top">
            <dl class="config">
                <dt>业务逻辑</dt>
                <dd>
                    <p>应用可轻量化与业务系统进行对接，可灵活扩展业务互联能力。了解更多</p>
                    <p>所有的数据都会以网络请求到此地址进行数据转换。可进行业务二次对接。</p>
                    <div class="custom-space"></div>
                    <el-form :model="tableData" ref="ruleFormRef">
                        <el-table ref="multipleTableRef" class="multiple-table" :data="tableData.tableList"
                            max-height="400">
                            <el-table-column property="eventName" label="事件" width="200"></el-table-column>
                            <el-table-column property="pre" label="前置" width="150">
                                <template #default="scope"><el-button type="primary" link class="is-link-i">编辑</el-button></template>
                            </el-table-column>
                            <el-table-column property="isEnabledPre" label="是否启用前置" width="200">
                                <template #default="scope">
                                    <el-form-item :prop="'tableList.' + scope.$index + '.isEnabledPre'">
                                        <el-switch v-model="scope.row.isEnabledPre" />
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <el-table-column property="postposition" label="后置" width="100">
                                <template #default="scope"><el-button type="primary" link class="is-link-i">设计</el-button></template>
                            </el-table-column>
                            <el-table-column property="isEnabledPostposition" label="是否启用后置" width="150">
                                <template #default="scope">
                                    <el-form-item :prop="'tableList.' + scope.$index + '.isEnabledPostposition'">
                                        <el-switch v-model="scope.row.isEnabledPostposition" />
                                    </el-form-item>
                                </template>
                            </el-table-column>
                            <template #empty v-if="tableData.tableList.length === 0"><el-empty
                                    description="无数据"></el-empty></template>
                        </el-table>
                    </el-form>
                </dd>
            </dl>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const ruleFormRef = ref()
const multipleTableRef = ref()

const tableData = ref({
    tableList: [
        {
            eventName: '导入数据',
            pre: '行内',
            isEnabledPre: false,
            postposition: true,
            isEnabledPostposition: false
        }
    ]
})
</script>

<style lang="less" scoped>
@import "./components/index.css";

.wrapper {
    width: 850px !important;
    margin: 0 auto !important;
    height: auto !important;
}

.config {
    background: rgb(255, 255, 255);
    padding: 15px;
    border-radius: 5px;

    dt {
        font-weight: bold;
        margin-bottom: 15px;
    }

    p {
        margin: 0;
        padding: 0;
        line-height: 30px;
        font-size: 12px;
        color: rgb(102, 102, 102)
    }
}
</style>